<template>
  <simple-layout title="理财NGT兑换">
 <div class="content">
      
      <div class="time-lists">
        <div style="display: flex;justify-content: space-between;">
          <div class="money-name">可交易NGT:0.0</div>
          <div>|</div>
          <div class="money">T释放NGT:0.0</div>
        </div>
      </div>
      <div class="time-lists" style="background:#F7F7F7 ;">
        <div style="display: flex;justify-content: space-between;">
          <div class="money-name" style="border-left:2px solid #0000FF;margin-top:15px; padding-left: 15px;height: 20px;line-height: 20px;">兑换类型</div>
        </div>
      </div>
       <div class="time-lists">
         <div style="display: flex;justify-content: space-between;">
           <div class="money-name">可交易NGT</div>
            <div class="money" @click="showDay()"> {{numMonth}}<i class="mui-icon mui-icon-arrowright"></i></div>
         </div>
       </div>

       <div class="time-lists" style="background:#F7F7F7 ;">
         <div style="display: flex;justify-content: space-between;">
           <div class="money-name" style="border-left:2px solid #0000FF;margin-top:15px; padding-left: 15px;height: 20px;line-height: 20px;">兑换数量</div>
         </div>
       </div>
       <div class="mui-input-row" style="background: #fff;padding-top: 6px;padding-bottom: -6px;">
           <input type="number" class="mui-input-password" placeholder="请输入兑换数量" style="width: 80vw;border: 0px;"><span>全部</span>
       </div>

       <div>
        <div style="margin-top: 40px!important;">
           <van-button class="submit-btn" @click="releaseLog()">立即兑换</van-button></div>
        </div>
     </div>

     <van-action-sheet
       class="sheet-day"
       v-model="show"
       :actions="actions"
       @select="onSelect"
     />
   </simple-layout>
 </template>

 <script>
   import SimpleLayout from "../../components/SimpleLayout";
   import PayService from '../../service/pay';

   export default {
     name: "Login",
     components: {
       //someComponent
       SimpleLayout
     },
     props: {},
     data() {
       return {
         show: false,
         numMonth: '请选择',
         actions: [
            { name: '可交易NGT' },
            { name: '取消' }
          ],
         transferfilter:{
           pageSize:10,
           pageNum:1
         },
         transferList:[]
       };
     },
     computed: {},
     watch: {},
     mounted: function() {
       this.getProductList()
     },
     methods: {
       getProductList(){
         PayService.transferList(this.transferfilter).then(res=>{
           if(res.status == 200){
             this.transferList = this.transferList.concat(res.resultData.list);
             console.log(this.transferList)
           }
         })
       },
      showDay() {
        this.show = true;
      },
      onSelect(item) {
             // 点击选项时默认不会关闭菜单，可以手动关闭
             this.show = false;
             this.numMonth = item.name
       },
       releaseLog(key) {
           if(key) {
             this.$router.push({ name: 'hac', params: { userId: 'hac' }})
           }
       }
     }
   };
 </script>


 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .content {
   height: 100vh;
   background-color: #f3f4f6;
 }
 .time-lists {
   padding: 0 10px 10px 10px;
   color: #999;
   background-color: #fff;
 }

 div.time-lists {
   border-top: 1px solid rgba(153, 153, 153, 0.5);
   height: 48px;line-height: 48px;
 }

 .time-title {
   border-bottom: 1px solid rgba(153, 153, 153, 0.5);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 0;
 }

 .time-title + div {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 0;
   line-height: 2;
 }

 .money-title{
   text-align: left;
 }

 .money-name {
   color: #7681AE;
   font-size: 16px;
   font-weight: bold;
 }

 .money {
   color: #333;
   font-size: 16px;
   font-weight: bold;
 }

 .out {
   color: red;
   font-size: 16px;
   font-weight: bold;
 }

 .in {
   color: #3885FF;
   font-size: 16px;
   font-weight: bold;
 }
 button.submit-btn {
   margin:28% 10% 2%;
   width: 80%;
   border-radius: 30px;
   background:#7B7FEE;
   background: -webkit-linear-gradient(to right, #696BE2, #7B7FEE, #8E93F9); /* Safari 5.1 - 6.0 */
   background: -moz-linear-gradient(to right, #696BE2, #7B7FEE, #8E93F9); /* Firefox 3.6 - 15 */
   background: linear-gradient(to right, #696BE2, #7B7FEE, #8E93F9); /* 标准的语法 */
   color: #fff;
   height: 52px;
   font-size: 18px;
 }
 .sheet-day .van-action-sheet {
   max-height: 40%;
 }
 </style>
